<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-button-group>
        <goBack></goBack>
        <el-button type="primary" @click="AddSensor">批量添加传感器</el-button>
      </el-button-group>

    </el-col>
    <el-col :span="24" class="toolbar">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>传感器位置设置</span>
        </div>
        <el-col :span="10">
          <h4 class="subtab_tit">点位图</h4>
          <el-card class="box-card uploadimg">
            <img :src="imgurl">
          </el-card>
        </el-col>
        <el-col :span="1">
          <div class="line"></div>
        </el-col>
        <el-col :span="13">
          <h4 class="subtab_tit">传感器分布</h4>
          <el-table :data="sensorsOptionList" size="mini" highlight-current-row border style="width: 100%" class="el-tb-edit" @current-change="handleCurrentChange" ref="demoTable">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column prop="sensorcode" label="传感器号" width="180">
              <template slot-scope="scope">
                <el-tag>
                  {{scope.row.sensorcode}}#传感器
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="location" label="位置">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.location" placeholder="请输入内容">33</el-input>
                <span>{{scope.row.location}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align:center;margin-top:20px;">
            <el-button type="primary" @click="submitSensorsLocation">立即提交</el-button>
          </div>
        </el-col>
      </el-card>
    </el-col>

    <!-- 历史上传记录 -->
    <el-col :span="24" class="toolbar">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>历史上传记录</span>
        </div>
        <el-table :data="historyList" stripe style="width: 100%" highlight-current-row>
          <el-table-column type="index" min-width="100">
          </el-table-column>
          <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
              <div class="firedownload" @click="fileDownload(scope.row)">{{scope.row.name}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="time" label="上传时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="130">
            <template slot-scope="scope">
              <el-button @click.native.prevent="handleDel(scope.$index, scope.row)" icon="el-icon-delete" size="small" type="danger"> </el-button>
            </template>
          </el-table-column>

        </el-table>
      </el-card>
    </el-col>

    <!-- 新增传感器 -->
    <addSensorShow :isAddShow.sync="isAddShow" :AddSensorStart.sync="AddSensorStart" :AddSensorEnd.sync="AddSensorEnd" @AddAction="AddAction"></addSensorShow>

  </section>
</template>
<script>
import NProgress from "nprogress";
import { getToken } from "@/utils/auth";
import goBack from "@/components/public/goback";
import addSensorShow from "@/components/public/addSensors";
export default {
  components: {
    goBack,
    addSensorShow
  },
  data() {
    return {
      imgurl: "",
      historyList: [],
      isAddShow: false,

      //添加传感器
      AddSensorStart: 0,
      AddSensorEnd: 0,

      //传感器池
      sensorsOptionList: []
    };
  },

  methods: {
    //上传对话框显示
    handleAdd() {
      this.isUploadShow = true;
    },
    //添加对话框显示
    AddSensor() {
      this.isAddShow = true;
    },
    getsensorlist() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/projects/dianweituxinxi/" + this.$route.params.projectid, {
          params: {}
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.sensorsOptionList = reply.data.data;
          } else {
            this.$message({
              message: `查询出错，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },

    // 批量添加传感器
    AddAction() {
      NProgress.start();
      debugger
      let start = this.AddSensorStart;
      let end = this.AddSensorEnd;
      for (let i = start; i <= end; i++) {
        let isIn = false;
        this.sensorsOptionList.map(sensor => {
          if (sensor.sensorcode == i) {
            isIn = true;
          }
        });
        if (!isIn) {
          this.sensorsOptionList.push({
            sensorcode: i,
            location: ""
          });
        }
      }
      NProgress.done();
      this.isAddShow = false;
    },
    // 编辑行
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    // 提交表单
    submitSensorsLocation() {
      let flag = 0;
      for (const child of this.sensorsOptionList) {
        const { location } = child;
        if (location === "") {
          flag = 1;
          break;
        }
      }
      if (flag === 1) {
        this.$message({ message: "请填写传感器位置", type: "warning" });
      } else {
        this.$confirm("确认提交传感器设置吗?", "提示", {
          type: "warning"
        }).then(() => {
          this.listLoading = true;
          NProgress.start();
          let params = {
            projectid: this.$route.params.projectid,
            locationList: this.sensorsOptionList
          };
          this.axios
            .post("/projects/dianweituxinxi/update", params)
            .then(reply => {
              this.listLoading = false;
              NProgress.done();
              if (reply.data.status === 0) {
                this.$notify({
                  title: "成功",
                  message: "提交成功",
                  type: "success"
                });
                this.getsensorlist();
              } else {
                this.$message({
                  message: `提交失败，错误码${reply.data.status},请联系管理员`,
                  type: "warning"
                });
              }
            });
        });
      }
    },

    //删除传感器
    handleDelete(index, r) {
      this.sensorsOptionList.splice(index, 1);
    },
    //删除传感器
    // handleClose(sensorcode) {
    //   this.sensorsOptionList.splice(this.sensorsOptionList.indexOf(sensorcode), 1);
    // },

    //文件下载
    fileDownload(row) {
      window.open("/" + row.dir);
    },

    //点位图历史列表
    getdianweituList() {
      this.listLoading = true;
      NProgress.start();
      this.axios
        .get("/projects/" + this.$route.params.projectid, {
          params: {}
        })
        .then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            if (reply.data.data.dianweitufileObject != null) {
              let dianweitufileJSON = reply.data.data.dianweitufileObject;
              this.imgurl =
                "/" + dianweitufileJSON.file.dir;
              this.historyList = dianweitufileJSON.list;
            }
          } else {
            this.$message({
              message: `查询出错，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
    },
    //删除点位图
    handleDel: function(index, row) {
      this.$confirm("确认删除该历史文件吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.listLoading = true;
        NProgress.start();
        let params = {
          projectid: this.$route.params.projectid,
          uuid: row.uuid
        };
        this.axios.post("/files/delete", params).then(reply => {
          this.listLoading = false;
          NProgress.done();
          if (reply.data.status === 0) {
            this.$notify({
              title: "成功",
              message: "删除成功",
              type: "success"
            });
            this.getdianweituList();
          } else {
            this.$message({
              message: `删除失败，错误码${reply.data.status},请联系管理员`,
              type: "warning"
            });
          }
        });
      });
    }
  },
  mounted() {
    this.getdianweituList();
    this.getsensorlist();
  }
};
</script>
 <style lang="scss" scoped>
.line {
  min-height: 315px;
  width: 1px;
  border-right: 1px #fff solid;
}
.uploadimg {
  width: 96%;
  margin: 0 auto 20px;
  text-align: center;
  img {
    height: auto;
    max-height: 700px;
  }
}
.firedownload {
  color: #409eff;
  cursor: pointer;
}
.el-tag {
  margin-left: 10px;
  margin-bottom: 10px;
}
.selectwith {
  width: 100%;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;

  vertical-align: bottom;
}
.subtab_tit {
  color: #303133;
  padding: 5px;
  margin: 0;
  font-weight: normal;
}
.subtable {
  thead {
    color: #909399;
    font-weight: 500;
  }
  td,
  th .is-leaf {
    border-bottom: 1px solid #ebeef5;
  }
  th {
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
  }
  .cell a {
    text-decoration: none;
    color: #409eff;
  }
}

/* 可编辑表格 */

.el-tb-edit .el-input,
.el-tb-edit .el-input-number,
.el-tb-edit .el-select {
  display: none;
  width: 100%;
}

.el-tb-edit .current-row .el-input,
.el-tb-edit .current-row .el-input-number,
.el-tb-edit .current-row .el-select {
  display: inherit;
}

.el-tb-edit .current-row .el-input + span,
.el-tb-edit .current-row .el-input-number + span,
.el-tb-edit .current-row .el-select + span {
  display: none;
}
</style>

